<template>
  <view class="box">
    <view class="box1">
      <uv-icon name="arrow-left" color="#000" @click="back"></uv-icon>
      <view class="box11">余额明细</view>
    </view>
    <view class="box2">
      <view class="box22" v-for="item in 3">
        <view class="box22-1">
          <view class="">充值</view>
          <view class="box22-font">2022-01-30 08:12</view>
        </view>
        <view class="box22-2">+20</view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';

  const back = (() => {
    uni.navigateBack({
      delta: 1, // 返回1个，如果是2，返回2个页面
    });
  })
</script>

<style lang="scss">
  .box {
    background-color: #fff;
    height: 100vh;

    .box1 {
      background-color: #d3efeb;
      height: 90rpx;
      line-height: 90rpx;
      color: #000;
      text-align: center;
      display: flex;
      padding: 0 30rpx;

      .box11 {
        width: 85%;
      }
    }

    .box2 {
      background: linear-gradient(to bottom, #d3efeb, #fff, #fff, #fff);
      padding: 30rpx 20rpx 20rpx;
      .box22{
        margin: 20rpx;
        padding-bottom: 20rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ababab;
        .box22-1{
          .box22-font{
            color: #ababab;
            margin-top: 10rpx;
            font-size: 26rpx;
          }
        }
        .box22-2{
          line-height: 80rpx;
          color: #008c8c;
        }
      }
    }
  }
</style>